<template>
    <div>
        <MyTitle title="公告列表"></MyTitle>
        <SearchTable @reset="resetList" @search="todoSearch">
            <template #default="{ sobj }">
                <el-col :span="6" class="ml10">
                    <el-select v-model="sobj.type" size="middle" style="width:100%;" placeholder="请选择公告分类">
                        <el-option v-for="item in AnnoTypes" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
            </template>
        </SearchTable>

        <el-row class="mt10">
            <!-- 表格 -->
            <el-col :span="23">
                <el-table :data="annoList" stripe style="width: 100%" center border :row-key="(item) => item._id">
                    <el-table-column type="index" label="序号" width="60" align="center" />

                    <el-table-column label="公告标题" width="220" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            <span> {{ scope.row.title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="公告分类" width="220" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag :color="AnnoTypes.find(item => item.value == scope.row.type).color">
                                {{ AnnoTypes.find(item => item.value == scope.row.type).label }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" width="220" align="center">
                        <template #default="scope">
                            <span> {{ dateFormat(scope.row.time, 'YYYY-MM-DD hh:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布人" width="140" align="center">
                        <template #default="scope">
                            <div class="flex">
                                <el-avatar :src="scope.row.author.avatar.replace(/public/, baseURL)" :size="35" />/
                                {{ scope.row.author.username }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="auto" align="center" fixed="right">
                        <template #default="scope">
                            <el-button circle type="success" :icon="View" size="small"
                                @click="gotoDetail(scope.row)"></el-button>
                            <tempalte v-if="userInfo">
                                <tempalte v-if="scope.row.author.username == userInfo.username">
                                    <el-popconfirm title="你确定要删除吗???" @confirm="ToDoDelete(scope.row, scope.$index)">
                                        <template #reference>
                                            <el-button class='ml10' circle :icon="Delete" type="danger"
                                                size="small"></el-button>
                                        </template>
                                    </el-popconfirm>
                                    <el-button circle type="primary" :icon="Edit" size="small"
                                        @click="updateItem(scope.row, scope.$index)"></el-button>
                                </tempalte>
                            </tempalte>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <DiaLogForm ref="diaRef" title="修改公告" btn="修改" :rules="rules" @todoconfirm="todoconfirm">
            <template #default="scope">
                <el-form-item label="公告标题" prop="title">
                    <el-input clearable v-model="scope.form.title" type="text" placeholder="请输入公告标题"
                        autocomplete="off" />
                </el-form-item>
                <el-form-item label="公告分类" prop="type">
                    <el-select v-model="scope.form.type" size="middle" style="width:100%;" placeholder="请选择公告分类">
                        <el-option v-for="item in AnnoTypes" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input rows="10" clearable v-model="scope.form.content" type="textarea" placeholder="请输入公告内容"
                        autocomplete="off" />
                </el-form-item>

                <el-form-item label="公告描述" prop="desc">
                    <div class="desc-box">

                        <UploadFile #default="{ fileRef }" @getFilePath="getFilePath">
                            <el-button class="desc-btn" type="info" @click="addDescImg(fileRef)">点击发布公告相关图片<el-icon>
                                    <Plus />
                                </el-icon> (只能一张)</el-button>
                        </UploadFile>
                        <el-image class="desc-img" v-if="scope.form.desc"
                            :src="scope.form.desc.replace(/public/, baseURL)"></el-image>
                    </div>
                </el-form-item>

            </template>
        </DiaLogForm>
    </div>
</template>

<script lang="ts" setup>

import { computed, onMounted, toRefs, ref, reactive } from "vue";
import { baseURL } from "../../api/request";
import { useStore } from "../../store";
import { AnnoTypes } from '../../utils'
import moment from 'moment'
import { useGolbalHook } from '../../hooks/useGolbalHook'
import { Calendar, Search, View, Edit, Delete } from '@element-plus/icons-vue'
import { Http } from "../../api/api";
import { useRouter } from "vue-router";

const router = useRouter()
const store = useStore()
const { getAnnoListAsync, getAnnoList } = store;
const annoList = computed(() => store.annoList)
const { userInfo } = toRefs(store)
const { dateFormat } = useGolbalHook()

const diaRef = ref<any>()
const rules = reactive<any>({
    title: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})
const todoSearch = (obj: any) => {
    getAnnoListAsync(obj)
}
const resetList = () => {
    getAnnoListAsync()
}

const gotoDetail = (item: any) => {
    router.push('/anno/detail/' + item._id)
}

const updateItem = (item: any) => {
    diaRef.value.show = true;
    diaRef.value.form = Object.assign({}, item)
}

const todoconfirm = async (item: any) => {
    let res = await Http.annoupdate(item) as any;
    if (res.code == 200) {
        diaRef.value.handleClose()
        getAnnoListAsync()
    }
}

const addDescImg = (fileRef: any) => {

    fileRef.click()
}

const getFilePath = (path: any) => {
    diaRef.value.form.desc = path;
}

const ToDoDelete = async (item: any, index: number) => {

    let res = await Http.annodelete({ _id: item._id }) as any;
    if (res.code == 200) {

        store.annoList.splice(index, 1)
        getAnnoList(store.annoList)
    }
}

onMounted(() => {
    getAnnoListAsync()
})

</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.file {
    display: none;
}
</style>